<template>
	<div class="evidence-unit-case-container">
		<el-form ref="refSeach" :inline="true" :model="formInline" size="mini">
			<el-form-item label-width="100px" prop="caseTime" label="创建时间">
				<el-date-picker
					v-model="formInline.caseTime"
					format="YYYY-MM-DD"
					value-format="YYYY-MM-DD"
					type="daterange"
					start-placeholder="开始时间"
					end-placeholder="结束时间"
					style="width: 220px"
				>
				</el-date-picker>
			</el-form-item>
			<el-form-item style="margin-left: 20px">
				<el-button type="primary" @click="onSearch" icon="el-icon-search" size="small">查询</el-button>
				<el-button type="danger" icon="el-icon-delete" @click="onDelete" size="small">删除</el-button>
				<el-button type="primary" icon="el-icon-set" @click="onSet" size="small">备份计划设置</el-button>
			</el-form-item>
		</el-form>
		<el-table
			ref="refCaseTable"
			:data="tableData"
			:default-sort="{ prop: 'name', order: 'descending' }"
			:row-style="{ height: '0' }"
			:cell-style="{ padding: '0' }"
			size="medium"
			style="width: 100%"
			@selection-change="handleSelectionChange"
			highlight-current-row
		>
			<el-table-column align="center" type="selection" width="55" />
			<el-table-column align="center" label="序号" type="index" width="60"> </el-table-column>
			<el-table-column align="center" sortable label="备份时间" show-overflow-tooltip>
				<template #default="scope">
					{{ scope.row.createTime.replace('T',' ') }}
				</template>
			</el-table-column>
			<el-table-column align="center" property="Status" sortable label="状态" show-overflow-tooltip>
				<template #default="scope">
					{{ statusFormat(scope.row.status) }}
				</template>
			</el-table-column>
			<el-table-column align="center" label="操作">
				<template #default="scope">
					<el-button type="success" @click="downloadBak(scope.row)" plain size="mini">下载</el-button>
				</template>
			</el-table-column>
		</el-table>
		<el-pagination
			:page-sizes="[10, 20, 50, 100]"
			:page-size="formInline.pageSize"
			layout="prev, pager, next, jumper,total,sizes"
			:total="total"
			
			@size-change="onHandleSizeChange"
			@current-change="onHandleCurrentChange"
			prev-text="上一页"
			next-text="下一页"
			background
		>
		</el-pagination>
		<el-drawer
			v-model="drawer"
			title="备份计划设置"
			direction="rtl"
			size="50%"
		>
			<setVue ref="setRef" @saveBakConfig="saveBakConfig"/>
		</el-drawer>
	</div>
</template>

<script lang="ts">
import { ref, reactive, toRefs } from 'vue';
import setVue from './component/set.vue';
import { queryDbBakList,deleteDbBak,saveDbBakConfig,queryDbBakConfig } from '/@/api/common/index';
import { dateFormat } from '/@/common';
import { ElMessageBox, ElMessage } from 'element-plus';
export default {
	name: 'EvidenceUnitCase',
	components: { setVue },
	setup() {
		const state = reactive({
			formInline: {
				caseTime:"",
				startDate:"",
				endDate:"",
				page: 1,
				pageSize: 10,
			},
			drawer:false,
			checkRecords: [],
			formInlineCase: {},
			tableData: [],
			total: 10,
		});
		
		const refSeach = ref();
		function onSearch() {
			init();
		}
		function onRest() {
			refSeach.value.resetFields();
		}
		function onHandleSizeChange(pageSize: number) {
			state.formInline.pageSize = pageSize;
			init();
		}
		function onHandleCurrentChange(pageIndex: any) {
			state.formInline.page = pageIndex;
			init();
		}
		function onDelete(){
			const records = state.checkRecords;
				if (records.length < 1) {
					ElMessage({ message: '请选择要删除的备份记录', type: 'warning' });
					return;
					false;
				}
				ElMessageBox.confirm('此操作将永久删除备份记录, 是否继续?', '提示', {
					confirmButtonText: '删除',
					cancelButtonText: '取消',
					type: 'warning',
				}).then(() => {
						const ids = records.map(function (x:any) {
							return x.id;
						});
						deleteDbBak({ ids: ids }).then((res:any) => {
							if (res.success) {
								ElMessage({
									message: '删除成功',
									type: 'success',
								});
								init();
							}
						});
					})
					.catch(() => {});
		}
		async function init() {
			state.formInline.startDate = '';
			state.formInline.endDate = '';
			if (state.formInline.caseTime && state.formInline.caseTime.length > 1) {
				state.formInline.startDate = state.formInline.caseTime[0];
				state.formInline.endDate = state.formInline.caseTime[1];
			}
			await queryDbBakList(state.formInline).then((res: any) => {
				if (res.success) {
					state.tableData = res.data.data;
					state.total = res.data.totalCount;
				}
			});
		}
		function saveBakConfig(row:any){
			saveDbBakConfig({configJson:JSON.stringify(row)}).then((res: any) => {
				if (res.success) {
					state.drawer = false;
				}
			});
		}
		const setRef = ref();
		function onSet(){
			queryDbBakConfig().then((res: any) => {
				if (res.success) {
					var row = JSON.parse(res.data);
					var isNew = !row.wk;
					state.drawer = true;
					if(setRef.value){
						setRef.value.initData(row,isNew);
					}else{
						var _interval1 = setInterval(function(){
							if(setRef.value.initData){
								setRef.value.initData(row,isNew);
								window.clearInterval(_interval1);
							}
						},100);
					}
				}
			});
		}
		function downloadBak(row:any){
			if(row.status == 1){
				window.open(row.path);
			}
		}
		function handleSelectionChange(value) {
			state.checkRecords = value;
		}
		init();
		return { 
			downloadBak,
			dateFormat,
			setRef,
			statusFormat:function(v:number){
				switch(v){
					case 0:return "备份中";
					case 1:return "备份完成";
				}
			},
			evCntFormat:function(obj:any){
				var r1 = JSON.parse(obj);
				return r1.length;
			},
			init,
			onSearch,
			onRest,
			onSet,
			saveBakConfig,
			handleSelectionChange,
			onHandleSizeChange,
			onHandleCurrentChange,
			refSeach,
			onDelete,
			...toRefs(state),
		};
	},
};
</script>
<style scoped>
.el-input,
.el-select,
.el-date-picker {
	width: 220px;
}
</style>
